<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>test</title>
	<!-- vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<h1>父组件信息：{{msgf}}</h1>
	<h2 v-for="(item,index) in productListCL">{{item.className}}</h2>
	<childcom  v-bind:list="productListCL"></childcom>
</div>

<script type="text/javascript">
window.onload = function(){

	var childcom = Vue.extend({
		data: function (){
		  return{
		    msgz:'子数据',
		  };
		},
		props: ['list'],
		template:'\
			<div>\
				<h1>子组件信息：{{msgz}}</h1>\
				<h2 v-for="(item,index) in list">{{item.className}}</h2>\
			</div>\
		',
	});

	var vm = new Vue({
		el: '#app',
		data:{
			msgf:'父数据',
		    productListCL:[
		        {
		            className:'classNameAAA',
		            age:1
		        },
		        {
		            className:'classNameB',
		            age:2
		        }
		    ]
		},
		components:{
			childcom
		}
	});

	setTimeout(function () {
		location.reload();
	},10000)
}
</script>
</body>
</html>